<template>
  <div class="home">
    <div>{{ counter }}</div>
    <button class="increment" @click="increment">自增</button>
    <button class="decrement" @click="decrement">自减</button>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { getCount, getLittleSister } from '@/services/Counter';

export default Vue.extend({
  name: 'home',
  data: () => ({
    counter: 0,
  }),
  mounted(): void {
    getCount().then((count) => this.counter = count);
  },
  methods: {
    increment(): void {
      this.counter++;
    },
    decrement(): void {
      this.counter--;
    },
  },
});
</script>
